<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">用户分析</div>
        <div class="search">
          <myDestSelect ref="destSelectRef" @destChange="destChange" />
          <myDateRangeSelect
            ref="dateSelectRef"
            @dateRangeChange="dateRangeChange"
          />
        </div>
      </div>
      <div class="p-cont">
        <div class="drug">
          <!-- <div class="title">
            管理居民总数 (人）
            <span>17126</span>
          </div> -->
          <div class="user-panel">
            <div
              :class="[
                'up-item',
                drugSelectedPanel.includes(1) ? 'active' : ''
              ]"
              @click="changeDrugSelectedPanel(1)"
            >
              <div class="up-des">
                <span>学习人数（人）</span>
                <MyToolTip
                  content="指标定义：筛选时间内，参与课程学习的用户总数"
                />
              </div>
              <div class="up-num">{{ formatNum(31881) }}</div>
              <!-- <div class="up-inc">
                <div class="up-inc-left">
                  <span>环比</span>
                  <IconifyIconOnline
                    icon="material-symbols:arrow-circle-down-outline-rounded"
                    width="20px"
                    height="20px"
                    class="green"
                  />
                  <span class="green">12.5%</span>
                </div>
                <div class="up-inc-right">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div> -->
            </div>
            <div
              :class="[
                'up-item',
                drugSelectedPanel.includes(2) ? 'active' : ''
              ]"
              @click="changeDrugSelectedPanel(2)"
            >
              <div class="up-des">
                <span>总学习时长（小时）</span>
                <MyToolTip
                  content="指标定义：筛选时间内，所有参与课程学习的用户学习时长之和"
                />
              </div>
              <div class="up-num">{{ formatNum(21097) }}</div>
            </div>
            <div
              :class="[
                'up-item',
                drugSelectedPanel.includes(3) ? 'active' : ''
              ]"
              @click="changeDrugSelectedPanel(3)"
            >
              <div class="up-des">
                <span>人均时长（小时/天）</span>
                <MyToolTip
                  content="指标定义：筛选时间内，所有参与课程学习的用户每天学习的平均时长"
                />
              </div>
              <div class="up-num">0.67</div>
            </div>
            <div
              :class="[
                'up-item',
                drugSelectedPanel.includes(4) ? 'active' : ''
              ]"
              @click="changeDrugSelectedPanel(4)"
            >
              <div class="up-des">
                <span>学习次数</span>
                <MyToolTip
                  content="指标定义：筛选时间内，所有用户的学习次数之和"
                />
              </div>
              <div class="up-num">253164</div>
            </div>
            <!-- <div
              :class="[
                'up-item',
                drugSelectedPanel.includes(5) ? 'active' : ''
              ]"
              @click="changeDrugSelectedPanel(5)"
            >
              <div class="up-des">
                <span>计划学习课程数</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有用户加入到“我的课程”（计划学习的课程）内的课程数量之和"
                />
              </div>
              <div class="up-num">127433</div>
            </div> -->
            <div
              :class="[
                'up-item',
                drugSelectedPanel.includes(6) ? 'active' : ''
              ]"
              @click="changeDrugSelectedPanel(6)"
            >
              <div class="up-des">
                <span>学习完成率</span>
                <MyToolTip
                  content="截止到筛选日期，视频看到结束完成学习的次数百分比"
                />
              </div>
              <div class="up-num">31.2%</div>
            </div>
          </div>
        </div>
        <div class="trend">
          <!-- <div class="title">趋势分析(人)</div> -->
          <div class="trend-content">
            <div class="tc-left">
              <div class="tc-btn">
                <el-button type="primary">导出详情数据</el-button>
                <el-button-group class="ml-4">
                  <el-button
                    plain
                    :type="dataTimeType === 1 ? 'primary' : 'default'"
                    @click="changeDataTimeType(1)"
                    >按日</el-button
                  >
                  <el-button
                    plain
                    :type="dataTimeType === 2 ? 'primary' : 'default'"
                    @click="changeDataTimeType(2)"
                    >按周</el-button
                  >
                  <el-button
                    plain
                    :type="dataTimeType === 3 ? 'primary' : 'default'"
                    @click="changeDataTimeType(3)"
                    >按月</el-button
                  >
                </el-button-group>
              </div>
              <div class="tc-line" ref="trendLineRef" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="part part2">
      <div class="part-left">
        <div class="p-title">学习时长 TOP10 用户</div>
        <div class="p-content">
          <el-table :data="timeData" style="width: 100%">
            <el-table-column label="排名">
              <template #default="scope">
                <span
                  :class="[scope.row.sq < 4 ? 'blue cell-span' : 'cell-span']"
                  >{{ scope.row.sq }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="uName" label="用户名" />
            <el-table-column prop="timeNum" label="学习时长" />
          </el-table>
        </div>
      </div>
      <div class="part-right">
        <div class="p-title">学习课程个数 TOP10 用户</div>
        <div class="p-content">
          <el-table :data="timeData2" style="width: 100%">
            <el-table-column label="排名">
              <template #default="scope">
                <span
                  :class="[scope.row.sq < 4 ? 'blue cell-span' : 'cell-span']"
                  >{{ scope.row.sq }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="uName" label="用户名" />
            <el-table-column prop="timeNum" label="课程个数" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref, Ref, onUnmounted, reactive } from "vue";

import { useECharts } from "@pureadmin/utils";
// 地区选择控件
import myDestSelect, { destSelectType } from "@/components/myDestSelect.vue";
import myDateRangeSelect, {
  dateRangeType
} from "@/components/myDateRangeSelect.vue";
import * as echartsTypes from "echarts/types/dist/echarts";
import { formatNum } from "@/utils/tools";
import MyToolTip from "@/components/myToolTip.vue";
import { lastWeeks } from "../../utils/tools";

const destSelectRef = ref<destSelectType | null>(null);
const dateSelectRef = ref<dateRangeType>();
const drugSelectedPanel = reactive([1]);
let trendLineIns = null;
const trendLineRef = ref(null);
const dataTimeType = ref(1);

const trendOption = {
  title: {
    text: "趋势分析(人)",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },

  legend: {
    data: ["学习人数"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },

  xAxis: {
    type: "category",
    boundaryGap: false,
    data: lastWeeks
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "学习人数",
      type: "line",
      data: ["3988", "4110", "4190", "5204", "4109", "7291", "2989"]
    }
  ]
};

enum learnSelectedType {
  learnNum = 1,
  totalTime,
  avgTime,
  csTimes,
  courses,
  complish
}

const learnUnitObj = {
  learnNum: "人",
  totalTime: "小时",
  avgTime: "小时/天",
  csTimes: "次数",
  courses: "课程数",
  complish: "完成率%"
};

const serverTrendData = ref({
  xAixsData: lastWeeks,
  learnNum: ["3988", "4110", "4190", "5204", "4109", "7291", "2989"],
  totalTime: ["2576", "2209", "3199", "3324", "2909", "4091", "2789"],
  avgTime: ["0.65", "0.54", "0.76", "0.64", "0.71", "0.56", "0.93"],
  csTimes: ["30912", "26508", "38388", "39888", "34908", "49092", "33468"],
  courses: [
    "125912",
    "126003",
    "126291",
    "126310",
    "126581",
    "126931",
    "127433"
  ],
  complish: ["31.21", "31.19", "31.20", "31.20", "31.19", "31.20", "31.20"]
});

const timeData = reactive([
  {
    sq: 1,
    uName: "王芳",
    timeNum: 118.31
  },
  {
    sq: 2,
    uName: "李娜",
    timeNum: 109.54
  },
  {
    sq: 3,
    uName: "张伟",
    timeNum: 100.77
  },
  {
    sq: 4,
    uName: "刘艳",
    timeNum: 92
  },
  {
    sq: 5,
    uName: "陈静",
    timeNum: 83.23
  },
  {
    sq: 6,
    uName: "杨洋",
    timeNum: 74.46
  },
  {
    sq: 7,
    uName: "赵静",
    timeNum: 65.69
  },
  {
    sq: 8,
    uName: "黄丽",
    timeNum: 58.1
  },
  {
    sq: 9,
    uName: "周杰",
    timeNum: 56.92
  },
  {
    sq: 10,
    uName: "吴秀英",
    timeNum: 48.15
  }
]);

const timeData2 = reactive([
  {
    sq: 1,
    uName: "王芳",
    timeNum: 1109
  },
  {
    sq: 2,
    uName: "李娜",
    timeNum: 1050
  },
  {
    sq: 3,
    uName: "张伟",
    timeNum: 991
  },
  {
    sq: 4,
    uName: "刘艳",
    timeNum: 932
  },
  {
    sq: 5,
    uName: "陈静",
    timeNum: 873
  },
  {
    sq: 6,
    uName: "杨洋",
    timeNum: 814
  },
  {
    sq: 7,
    uName: "赵静",
    timeNum: 755
  },
  {
    sq: 8,
    uName: "黄丽",
    timeNum: 696
  },
  {
    sq: 9,
    uName: "周杰",
    timeNum: 690
  },
  {
    sq: 10,
    uName: "吴秀英",
    timeNum: 637
  }
]);

function destChange() {
  getServerData();
}

function dateRangeChange() {
  getServerData();
}

function changeDrugSelectedPanel(val) {
  trendOption.title.text = `趋势分析（${
    learnUnitObj[learnSelectedType[val]]
  }）`;
  drugSelectedPanel.splice(0, 1, val);
  // const index = drugSelectedPanel.indexOf(val);
  // if (index > -1) {
  //   if (drugSelectedPanel.length === 1) {
  //     return;
  //   } else {
  //     drugSelectedPanel.splice(index, 1);
  //   }
  // } else {
  //   drugSelectedPanel.push(val);
  // }
  setTrendLineOption();
}

function setTrendLineOption() {
  // 获取数据
  const textNames = [
    "学习人数",
    "总学习时长",
    "人均时长",
    "课程学习次数",
    "计划学习课程数",
    "课业完成率"
  ];

  trendOption.legend.data = drugSelectedPanel.map(item => {
    return textNames[item - 1];
  });
  trendOption.xAxis.data = serverTrendData.value.xAixsData;

  trendOption.series = drugSelectedPanel.map(item => {
    // console.log("learnSelectedType[item]:", learnSelectedType[item]);
    return {
      name: textNames[item - 1],
      type: "line",
      data: serverTrendData.value[learnSelectedType[item]]
    };
  });
  trendLineIns.clear();
  trendLineIns.setOption(trendOption as any);
}

function changeDataTimeType(val) {
  console.log("val:", val);
  dataTimeType.value = val;
  getServerData();
}

async function getServerData() {
  // 获取数据
}

function initTrendLine(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(trendOption as any);
  return getInstance();
}

function initEcharts() {
  trendLineIns = initTrendLine(trendLineRef);
}

function resizeChart() {
  // console.log("resizeChart");
  trendLineIns?.resize();
}

onMounted(() => {
  initEcharts();
  getServerData();
  window.addEventListener("resize", resizeChart);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeChart);
});
</script>
<style scoped lang="scss">
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-select {
    margin-right: 20px;
  }

  .el-date-picker {
    margin-left: 20px;
  }
}

.p-cont {
  background-color: white;
  border-radius: 4px;

  .drug {
    .title {
      span {
        font-size: 24px;
      }
    }

    .user-panel {
      display: flex;
      align-items: center;
      margin-top: 20px;
      flex-wrap: wrap;

      .up-item {
        border: 1px solid #eee;
        border-radius: 8px;
        width: 15%;
        min-height: 130px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 130px;
        min-width: 180px;
        margin: 20px auto 0px;

        &.active {
          background-color: #4993fa;

          .up-des {
            color: white;
          }

          .up-num {
            color: white;
          }

          .up-inc {
            color: white;
          }
        }

        .up-des {
          font-size: 16px;
          color: #333;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .up-num {
          font-weight: bold;
          font-size: 36px;
          margin-top: 10px;
        }

        .up-inc {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;
          font-size: 14px;
          font-weight: 400;

          .up-inc-left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #666;

            svg {
              margin: 0px 2px;
              width: 16px;
              height: 16px;
            }

            .green {
              color: #00a870;
            }

            .red {
              color: #e54d59;
            }
          }

          .up-inc-right {
            cursor: pointer;
            color: #bbb;
          }
        }
      }
    }
  }

  .trend {
    margin-top: 30px;

    .trend-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tc-single {
        width: 100%;
      }

      .tc-left {
        width: 100%;
      }

      .tc-btn {
        text-align: left;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }

      .tc-line {
        width: 100%;
        height: 400px;
        margin-top: 20px;
      }
    }
  }
}

.part2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f2f5;
  padding: 0px;

  .p-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }

  .part-line {
    height: 100%;
    background: gray;
    width: 20px;
  }

  .part-left {
    width: calc(50% - 10px);
    height: 100%;
    background: white;
    border-radius: 4px;
    padding: 20px;
  }

  .part-right {
    width: calc(50% - 10px);
    height: 100%;
    background: white;
    border-radius: 4px;
    padding: 20px;
  }
}

.blue {
  background: #409eff;

  border-radius: 10px;
  color: white;
}

.cell-span {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
</style>
